<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多层次选择</title>
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <select v-model="clan">
        <option v-for="(types, clan) in clans">{{clan}}</option>
    </select>

    <select v-model="type">
        <option v-for="(species, type) in clans[clan]">{{type}}</option>
    </select>
    <!--因为clans[clan]未定义,所以使用v-if-->
    <select v-if="clans[clan]">
        <option v-for="(animals, species) in clans[clan][type]">{{species}}</option>
    </select>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            clans: {
                mammalia: {
                    'have fingers': {
                        human: 'human',
                        chimpanzee: 'chimpanzee'
                    },
                    'fingerless': {
                        cat: 'cat',
                        bear: 'bear'
                    }
                },
                birds: {
                    flying: {
                        eagle: 'eagle',
                        pidgeon: 'pidgeon'
                    },
                    'non flying': {
                        chicken: 'chicken'
                    }
                }
            },
            clan: undefined,
            type: undefined
        }
    })
</script>
</body>
</html>